<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        . pagination {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .pagination li {
            display: inline-block;
            padding: 20px;
        }
    </style>
</head>
<body>
<table class="layui-table" id="demo" >
    <thead>
    <tr>
        <th><input id='checkAll' type="checkbox"/></th>
        <th>name</th>
        <th>class_id</th>
        <th>birthday</th>
    </tr>
    </thead>
    <tbody>
    {volist name='stu' id='user'}
    <tr>
        <td>{$user->sname}</td>
        <td>{$user->class_id}</td>
        <td>{$user->birthday}</td>
    </tr>
    {/volist}

    </tbody>
</table>
<div id="test"></div>
</body>

<script>
    $(function(){
        //初始化
        function initTable() {
            var checkAll = $('#checkAll');
            var trs = $('tbody tr');
            var tag = $('<td><input name="checkitem" type="checkbox"/></td>');
            trs.prepend(tag);

            //得到tbody中的所有选框.
            var checks = $('input[name="checkitem"]');

            //给全选框添加事件
            checkAll.on('click',function(event){
                if($(this).prop('checked') == false){ //全部取消
                    $('input[type="checkbox"]').prop('checked',false);
                }else{
                    $('input[type="checkbox"]').prop('checked',true);
                }
            });

            //给每个单独的选择框加事件
            $('tbody').on('click',function(event){
                checks = $('input[name="checkitem"]');
                if (event.target.name == 'checkitem'){
                    if($(this).prop('checked') == false){
                        $(this).prop('checked',false);
                    }else{
                        $(this).prop('checked',true);
                    }
                    //判断是否选满了
                    if(checks.length == $('tbody').find('input:checked').length){
                        checkAll.prop('checked',true);
                    }else{
                        checkAll.prop('checked',false);
                    }
                }
            });
        }

        initTable();

        //新增点击事件
        $('#addTypeBtn').on('click', function () {
            var html = '';
            html += '<tr class="active">';
            html += '<td><input name="checkitem" type="checkbox"/></td>'
            html += '<td><input type="text" placeholder="请输入姓名"  value="张三"/></td>';
            html += '<td><input type="number" style="width: 40px" value="1"/></td>';
            html += '<td>';
            html += '</tr>';
            var html = $(html)
            $('tbody').append(html);
            //取消全选
            $('#checkAll').prop('checked',false);
        });
    });
</script>
</html>

</script>
</html>